<template>
  <!-- 首页热门课程 -->
  <div class="lesson-box">
    <IndexTitle :titleInfo="titleInfo" />
    <ul class="lesson-ul">
      <li v-for="(item, index) in lessonInfo" :key="index">
        <LessonItem :itemInfo="item" />
      </li>
    </ul>
  </div>
</template>

<script setup>
const titleInfo = {
  title: '热门课程',
  path: '/curriculum',
  showMore: true,
}

defineProps({
  lessonInfo: {
    type: Array,
    default: []
  }
})
</script>

<style lang="less">
.lesson-box {
  width: 1200px;
  margin-bottom: 40px;

  .lesson-ul {
    // width: 100%;
    margin-left: -15px;
    overflow: hidden;

    >li {
      float: left;
      margin-left: 15px;
    }
    // height: 810px;
    // display: flex;
    // justify-content: space-between;
    // flex-wrap: wrap;
  }
}
</style>